<template>
  <div class="c-config-list">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="search"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <c-config-add-edit
          ref="configAddEdit"
          :info="info"
          :field="field"
          @success="successAddEdit"
        ></c-config-add-edit>
      </template>
    </c-row-search>
    <div class="c-config-list-table">
      <c-table
        index
        :data="filterData"
        :col="col"
        @switch-change="switchChange"
      >
        <template #opn="{ row }">
          <el-button type="text" @click="edit(row)">
            <c-icon name="edit"></c-icon>
            <span>
              {{ multLang('btn_edit_a') }}
            </span>
          </el-button>
          <el-button type="text" @click="del(row)" v-if="info.value !== '10'">
            <c-icon name="delete"></c-icon>
            <span>
              {{ multLang('btn_delete_a') }}
            </span>
          </el-button>
        </template>
        <!-- <template #opn>
          <el-table-column width="200px" align="center">
            <template slot="header" slot-scope="{}">
              {{ multLang('title_action_a') }}
            </template>
            <div slot-scope="{ row }" style="text-align: center">
              <el-button type="text" @click="edit(row)">
                <c-icon name="edit"></c-icon>
                <span>
                  {{ multLang('btn_edit_a') }}
                </span>
              </el-button>
              <el-button
                type="text"
                @click="del(row)"
                v-if="info.value !== '10'"
              >
                <c-icon name="delete"></c-icon>
                <span>
                  {{ multLang('btn_delete_a') }}
                </span>
              </el-button>
            </div>
          </el-table-column>
        </template> -->
      </c-table>
    </div>
  </div>
</template>
<script>
import {
  delConfigData,
  editConfigData,
  getConfig,
  getConfigData
} from '@/http/api/v1/config'
import CConfigAddEdit from './AddEdit.vue'

import { searchWord } from '@/util/data'
export default {
  name: 'CConfigList',
  components: { CConfigAddEdit },
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isTree: false,
      keyword: '',
      field: [],
      data: [],
      filterData: []
    }
  },
  computed: {
    col() {
      const hf = (arr, { langKey, name, option, selectKey, isTree }) => {
        if (this.select && name === 'parent_id') return arr
        const item = {
          label: langKey,
          prop: name
        }
        if (selectKey) {
          if (option === 'radio')
            item.switch = {
              auth: true,
              list: isTree
                ? this.optionTree(selectKey)
                : this.optionList(selectKey)
            }
          if (option === 'select')
            item.formatter = row => this.optionMap(selectKey)[row[name]]
        }
        arr.push(item)
        return arr
      }
      return this.field.reduce(hf, [])
    },
    systemConfigType() {
      return this.info.value
    }
  },
  watch: {
    info: {
      deep: true,
      handler(val) {
        val && this.query()
      }
    },
    field: {
      deep: true,
      handler() {
        this.getOption()
        this.search()
      }
    },
    data: {
      deep: true,
      handler() {
        this.search()
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.filterData = searchWord(
        this.keyword,
        this.data,
        this.field[0] && this.field[0].name
      )
    },
    getOption() {
      this.field.forEach(
        ({ selectKey }) => selectKey && this.setOption({ key: selectKey })
      )
    },
    successAddEdit() {
      this.queryData()
      this.getOption()
    },
    query() {
      this.field = []
      this.data = []
      const { systemConfigType } = this
      systemConfigType &&
        getConfig({ systemConfigType }).then(({ data }) => {
          const { isTree, field } = data || {}
          this.isTree = !!isTree
          this.field = field || []
          this.queryData()
        })
    },
    queryData() {
      const { systemConfigType } = this
      systemConfigType &&
        getConfigData({ systemConfigType }, this.isTree).then(({ data }) => {
          this.data = data || []
        })
    },
    switchChange({ val: is_use, valBack }, row) {
      const { systemConfigType } = this
      const { id } = row || {}
      systemConfigType &&
        editConfigData({ systemConfigType, id, is_use })
          .then(({ code }) => {
            if (code === 200) {
              this.queryData()
            } else {
              valBack()
            }
          })
          .catch(() => {
            valBack()
          })
    },
    edit(row) {
      this.$refs.configAddEdit.edit(row || {})
    },
    del(row) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_asset_d']),
        this.multLang('btn_delete_a', 'title_asset_d'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { systemConfigType } = this
        const { id } = row || {}
        systemConfigType &&
          id &&
          delConfigData({ systemConfigType, id }).then(({ code }) => {
            if (code === 200) {
              this.queryData()
            }
          })
      })
    }
  }
}
</script>
<style lang="scss">
.c-config-list {
  height: calc(100% - 52px);
  &-search {
    margin-right: 10px;
    line-height: 32px;
  }
  &-table {
    height: calc(100% - 66px);
  }
}
</style>
